<template>
  <div class="update customer-dialog">
    <el-dialog class="upstatus-dialog" :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('public.editStatus')" :visible.sync="dialogVisible" v-if="isUpStaDialog">
      <div class="u-content">
        <span class="u-count">{{$t('customer.batchTransCustmoerCount', {count})}}</span>
        <customer-status-select
          :placeholder="$t('public.pleasePick')"
          :status = "''"
          ref="custStatus"
          @statusChange = "getStatus"
          class = "u-input"
        ></customer-status-select>
        <span slot="footer" class="u-footer">
          <el-button class="primary_btn" @click.stop="cancel">{{$t('public.cancel')}}</el-button>
          <el-button type="primary" class="primary_btn" @click.stop="submit">{{$t('public.save')}}</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import CustomerStatusSelect from './CustomerStatusSelect'
  export default {
    name: 'UpdateStatusDialog',
    data () {
      return {
        dialogVisible: false,
        status: null
      }
    },
    props: {
      isUpStaDialog: {
        type: Boolean,
        default: false
      },
      count: {
        type: Number,
        default: 0
      }
    },
    components: {
      CustomerStatusSelect
    },
    methods: {
      cancel () {
        this.$emit('cancelAndSubmit', {
          type: 'cancel',
          bool: false,
          status: null
        })
      },
      submit () {
        this.$refs.custStatus.getCustStatus()
        this.$emit('cancelAndSubmit', {
          type: 'submit',
          bool: false,
          status: this.status
        })
      },
      getStatus (val) {
        this.status = val
      }
    },
    watch: {
      isUpStaDialog (cur, old) {
        this.dialogVisible = cur
      },
      dialogVisible (cur, old) {
        if (cur === false) {
          this.$emit('cancelAndSubmit', {
            type: 'cancel',
            bool: false,
            status: null
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
.update
  .u-content
    padding 0 30px 20px
    .u-count
      display block
      margin-bottom 15px
      color $cf-gray0
    .u-input
      width 50%
    .u-footer
      margin-top 20px
      display block
      text-align center
</style>
